<template>
  <div id="detail">
    <!-- 详情页navBar区域 -->
    <detail-nav-bar
      class="nav-bar"
      @titleClick="titleClick"
      ref="nav"
    ></detail-nav-bar>
    <scroll
      class="scroll"
      :pull-up-load="true"
      ref="scroll"
      :probe-type="3"
      @scroll="scrollPosition"
    >
      <!-- 轮播区域 -->
      <detail-swiper :goods="topGoodsImgs"></detail-swiper>
      <!-- goodsbaseinfo 区域 -->
      <detail-goods-base-info :goods-info="goodsBase"></detail-goods-base-info>
      <!-- 店铺信息区域 -->
      <detail-shop-info :shop="shop"></detail-shop-info>
      <!-- 商品的详细信息 -->
      <detail-info :goods="goodsDetail" @imgLoad="imgloadover"></detail-info>
      <!-- 商品参数区域 -->
      <detail-goods-params
        :goods-params="goodsParams"
        ref="params"
      ></detail-goods-params>
      <!-- 评论区域 -->
      <detail-comment :commentInfo="commentInfo" ref="comment"></detail-comment>
      <!-- 推荐区域 -->
      <goods-list :goods="recommends" ref="goods"></goods-list>
    </scroll>
    <back-top @click.native="backTopClick" v-show="isShowBackTop"></back-top>
    <detail-bottom-bar @addToCar="addToCar"></detail-bottom-bar>
  </div>
</template>
<script>
import DetailNavBar from "./childDetail/DetailNavBar";
import DetailSwiper from "./childDetail/DetailSwiper";
import DetailGoodsBaseInfo from "./childDetail/DetailGoodsBaseInfo";
import DetailShopInfo from "./childDetail/DetailShopInfo";
import DetailInfo from "./childDetail/DetailInfo";
import DetailGoodsParams from "./childDetail/DetailGoodsParam";
import DetailComment from "./childDetail/DetailComment";
import DetailBottomBar from "./childDetail/DetailBottomBar";

import GoodsList from "components/context/goods/GoodsList";

import Scroll from "components/common/scroll/Scroll";

import { imgLoadRefresh, backTopcom } from "common/mixin";
import { debounce } from "common/utils";

import {
  getDetail,
  GoodsBaseInfo,
  GoodsParams,
  recommend,
} from "network/detail";
export default {
  name: "Detail",
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailGoodsBaseInfo,
    DetailShopInfo,
    DetailInfo,
    DetailGoodsParams,
    DetailComment,
    DetailBottomBar,
    GoodsList,
    Scroll,
  },
  mixins: [imgLoadRefresh, backTopcom],
  data() {
    return {
      iid: "",
      topGoodsImgs: [],
      goodsBase: {},
      shop: {},
      goodsDetail: {},
      goodsParams: {},
      commentInfo: {},
      recommends: [],
      themeOffSetTopY: [],
      imgLoadFun: null,
      currentIndex: 0,
    };
  },
  created() {
    this.iid = this.$route.query.iid;

    getDetail(this.iid).then((res) => {
      console.log(res);
      const data = res.result;
      this.topGoodsImgs = data.itemInfo.topImages;
      this.goodsBase = new GoodsBaseInfo(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      this.shop = data.shopInfo;

      this.goodsDetail = data.detailInfo;
      this.goodsParams = new GoodsParams(
        data.itemParams.info,
        data.itemParams.rule
      );
      //   保存评论数据
      if (data.rate.cRate !== 0) {
        this.commentInfo = data.rate.list[0];
      }
    });
    // 请求推荐数据
    recommend().then((res) => {
      console.log(res);
      this.recommends = res.data.list;
    });
    this.imgLoadFun = debounce(() => {
      this.themeOffSetTopY = [];
      this.themeOffSetTopY.push(0);
      this.themeOffSetTopY.push(this.$refs.params.$el.offsetTop);
      this.themeOffSetTopY.push(this.$refs.comment.$el.offsetTop);
      this.themeOffSetTopY.push(this.$refs.goods.$el.offsetTop);
      this.themeOffSetTopY.push(Number.MAX_VALUE);
    }, 100);
    // 图片可能未获取完，导致获取的offsettop不正确
    // this.$nextTick(() => {
    //   this.themeOffSetTopY = [];
    //   this.themeOffSetTopY.push(0);
    //   this.themeOffSetTopY.push(this.$refs.params.$el.offSetTop());
    //   this.themeOffSetTopY.push(this.$refs.comment.$el.offSetTop());
    //   this.themeOffSetTopY.push(this.$refs.goods.$el.offSetTop());
    // });
  },
  methods: {
    imgloadover() {
      this.$refs.scroll.refresh();
      this.imgLoadFun();
    },
    titleClick(index) {
      this.$refs.scroll.scrollTop(0, -this.themeOffSetTopY[index], 100);
    },
    scrollPosition(position) {
      this.isShowBackTop = -position.y > 1000;
      const positiony = -position.y;
      const len = this.themeOffSetTopY.length;
      //   不在this.themeOffSetTopY里面push最大值
      //   for (let i = 0; i < len; i++) {
      // if (
      //   this.currentIndex !== i &&
      //   ((i < len - 1 &&
      //     positiony >= this.themeOffSetTopY[i] &&
      //     positiony < this.themeOffSetTopY[i + 1]) ||
      //     (i === len - 1 && positiony >= this.themeOffSetTopY[i]))
      // ) {
      //   this.currentIndex = i;
      //   console.log(this.currentIndex);
      //   this.$refs.nav.currentIndex = this.currentIndex;
      // }
      //   }

      // 在this.themeOffSetTopY里面push最大值
      for (let i = 0; i < len - 1; i++) {
        if (
          this.currentIndex !== i &&
          positiony >= this.themeOffSetTopY[i] &&
          positiony < this.themeOffSetTopY[i + 1]
        ) {
          this.currentIndex = i;
          this.$refs.nav.currentIndex = this.currentIndex;
        }
      }
    },
    addToCar() {
      const obj = {};
      obj.iid = this.iid;
      obj.imgURL = this.topGoodsImgs[0];
      obj.title = this.goodsBase.title;
      obj.desc = this.goodsBase.desc;
      obj.price = this.goodsBase.realPrice;
      //   this.$store.commit("addToCart", obj);
      this.$store.dispatch("addToCart", obj);
    },
  },
  destroyed() {
    this.$bus.$off("imgItemLoad", this.imgRefresh);
  },
};
</script>
<style scoped>
#detail {
  position: relative;
  z-index: 9;
  background-color: #fff;
  height: 100vh;
}

.nav-bar {
  position: relative;
  z-index: 9;
  background-color: #fff;
}

.scroll {
  height: calc(100% - 44px - 49px);
  overflow: hidden;
}
</style>
